<template>
	<view class="">
		<view class="flex my15 mx15">
			<view class="py7 px12 bor40 bgcc mr10 f12" v-for="(item,index) in TabArray" :key="index" :class="{'border-blue':TabIndex == index,fwb:TabIndex == index}" @click="Tab(index)">
				<text>{{item}}</text>
			</view>
		</view>
		<view class="mx15 px15 border bor5 py17 my15" @click="pushPage('/pages/Computing/details')">
			<view class="fsb fwb">
				<text>1 MHS-盛大矿机</text>
				<text class="red">挖矿中</text>
			</view>
			<view class="ash f11 mt8">
				<text>购买算力</text>
			</view>
			<view class="f11 fsb mt17">
				<view class="">
					<text class="ash">订单：</text>
					<text>4523626</text>
				</view>
				<view class="">
					<text class="ash">时间：</text>
					<text>2021-03-01 12:23:42</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			TabArray:['STD矿机','ETH矿机','BTC矿机'],
			TabIndex:0
		};
	},
	onShow() {},
	methods: {
		Tab(index){
			this.TabIndex=index
		}
	}
};
</script>

<style lang="less">
	.border{
		border: 1rpx solid #d5d5d5;
	}
	.border-blue{
		border: 1rpx solid #308AE4;
		color: #308AE4;
	}
	.bor40{
		border-radius: 40rpx;
	}
	.bgcc{
		background: #f5f5f5;
	}
	.green{
		color: #05C25D;
	}
	.red{
		color: #FF4B4B;
	}
</style>
